// 案例： 按钮添加物体
import * as THREE from 'three'
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls'
import {GUI} from 'three/examples/jsm/libs/lil-gui.module.min.js'
var camera;
var scene;
var renderer;
export default function(){
   scene = new THREE.Scene();
   const width = window.innerWidth;
   const height = window.innerHeight;
   camera = new THREE.PerspectiveCamera(30,width/height,1,1000);
   camera.position.set(300,100,100);
   camera.lookAt(0,0,0)

   const spotLight = new THREE.SpotLight(0xffffff,5)//,3,300,Math.PI)
   spotLight.position.set(260,80,10);
   spotLight.castShadow = true;
   spotLight.decay = 0
   scene.add(spotLight);

   const geometry = new THREE.BoxGeometry(10,10,10);
   const material = new THREE.MeshStandardMaterial({
    color: 0xff00ff
   })
   
   const mesh = new THREE.Mesh(geometry,material);
   mesh.position.set(0,0,0)
   mesh.castShadow = true;
   
   const planeGeometry = new THREE.PlaneGeometry(300,400);
   console.log(planeGeometry,planeGeometry.parameters.width,planeGeometry.parameters.height)
   const planeMaterial = new THREE.MeshStandardMaterial({
    color: 0xCCCCCC
   })
   const plane = new THREE.Mesh(planeGeometry,planeMaterial)
   plane.position.set(0,-25,0);
   plane.rotation.x = -0.5*Math.PI;
   plane.receiveShadow = true;
   scene.add(plane)

   renderer = new THREE.WebGLRenderer();
   renderer.setSize(width,height);
   renderer.setClearColor(0xcccccc);
   renderer.shadowMap.enabled = true;

   var guiControls = new function(){
   // 添加
      this.addCube = function(){
         var cubSize = Math.ceil((Math.random()*10));
         var cubGeometry = new THREE.BoxGeometry(cubSize,cubSize,cubSize);
         var cubMetrial = new THREE.MeshStandardMaterial({
            color:Math.random()*0xffffff
         })
         var cubMesh = new THREE.Mesh(cubGeometry,cubMetrial);
         cubMesh.castShadow = true;
         cubMesh.name = 'cube-'+ scene.children.length;
         cubMesh.position.x = -50+Math.round(Math.random()*planeGeometry.parameters.width);
         cubMesh.position.y = Math.round((Math.random()*1));
         cubMesh.position.z = -100+Math.round(Math.random()*planeGeometry.parameters.height)
         console.log("cubMesh",cubMesh)
         scene.add(cubMesh);
         console.log("scene",scene)
         this.numberOfObject = scene.children.length;
      };
      //移除
         this.removeCube = function(){
         var allChildren = scene.children;
         var lastObject = allChildren[scene.children.length-1];
         if(lastObject instanceof THREE.Mesh){
            scene.remove(lastObject);
            this.numberOfObject = scene.children.length;
         }
      };
      this.bouncingSpeed = 0.02;
   }
   var gui = new GUI();
   gui.add(guiControls,"bouncingSpeed",0,0.5);
   gui.add(guiControls,"addCube")
 
   document.body.appendChild(renderer.domElement)
   var trackballControls = new TrackballControls(camera,renderer.domElement);

   function renderScene(){
    scene.traverse(function(obj){
// 判断是否是mesh，且排除plane对象
         if(obj instanceof THREE.Mesh && obj!=plane){
            obj.rotation.x += 0.02;//trackballControls.rotationSpeed;
            obj.rotation.y += 0.02;//trackballControls.rotationSpeed;
            obj.rotation.z += 0.02;//trackballControls.rotationSpeed;
         }
      })
      requestAnimationFrame(renderScene);
      trackballControls.update();
      renderer.render(scene,camera)
   }
   renderScene()   
}

window.addEventListener("resize",onResize,false)
function onResize(){
   camera.aspect = window.innerWidth/window.innerHeight;
   camera.updateProjectionMatrix();
   renderer.setSize(window.innerWidth,window.innerHeight);
 }